import { MyHead } from "../../components/head"
import { Form, Input, Button, Toast } from "antd-mobile"
import { FormInstance } from "antd-mobile/es/components/form";
import { useRef, useState } from 'react'
import { YzmCom } from "../../components/yzmCom";
import { PassCom } from "../../components/PassCom";
import { reg } from "../../util/reg";
import { Link } from "react-router-dom";
import './reg.scss'
import { YZYzm, zhuCe } from "../../api/user";
import { changeUserData } from "../../rtk/reduers/data";
import { HK } from "../../components/HuaKuai";
import { useTiaoZhuan } from "../../hooks/routers";
// import {Vertify} from '@alex_xu/react-slider-vertify';
const MyReg = () => {
    type formsType = {
        Yzm: string
        newpass: string
        password: string
        phone: string
        username: string

    }
    const {Tz} = useTiaoZhuan()
    const [show,setshow] = useState(false)

    // 获取表单的ref
    const formRef = useRef<FormInstance>({} as FormInstance);
    // 当表单验证成功 发送提交
    const onFinish = async (value: formsType) => {
            let res = await YZYzm(value.phone, value.Yzm);
            if (res.data) {
                zhuCe(value)
                Tz('/home/my')
            } else {
                console.log('kkkkk');
                
                Toast.show({
                    content: "验证码错误"
                })
            }

    }

    const [phone, setphone] = useState('')

    const yzheng = ()=>{
        formRef.current.validateFields().then(()=>{
            setshow(true)
        }).catch(err=>console.log(err)
        )
    }
    return (
        <div className="ComParClass">
            <MyHead title="注册" />
            { show && <HK callback={formRef.current.submit} setshow={setshow} show={show}/>}

            <Form
                style={{ padding: "0 10px", fontSize: '14px' ,marginTop:50}}
                ref={formRef}
                onFinish={onFinish}
                onFinishFailed={() => Toast.show({
                    content: '表单验证失败',
                })}
                layout='horizontal'
                footer={
                    <div className="footers">
                        <Button
                            color='primary'

                            size='middle'
                            onClick={yzheng
                            }
                        >
                            注册
                        </Button>
                        <Button
                            color='danger'
                            type='reset'
                            size='middle'
                            key={'reset'}
                        >
                            重置
                        </Button>
                    </div>

                }
            >
                <Form.Item
                    name='username'
                    label='用户名'
                    rules={[{ required: true, message: '用户名不能为空' }]}
                >
                    <Input placeholder='请输入用户名' onChange={() => console.log(formRef)} />
                </Form.Item>
                <Form.Item
                    name='phone'
                    label='手机号'
                    rules={[{ required: true, message: '手机号不能为空' }, { pattern: reg.phone, message: '手机格式不正确' }]}
                    help='11位手机号'
                >
                    <Input placeholder='请输入手机号' onChange={setphone} />
                </Form.Item>
                <YzmCom phone={phone} />
                <PassCom dependencies={['newpass']} />
                <PassCom
                    label="再次输入手机号"
                    help='请再次输入密码'
                    dependencies={['password']}
                    placeholder="请再次输入密码"
                    name={'newpass'}
                    rules={[
                        ({ getFieldValue}:{getFieldValue:Function} ) => ({
                            validator(_: any, value: string) {
                                // 如果通过第二个密码的规则测试
                                if (reg.pwd.test(value)) {
                                    // 如果密码不为空 而且关联的密码相同
                                    if (!value.trim() || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('两次密码不匹配'));
                                } else {
                                    return Promise.reject()
                                }
                            },
                        }),
                    ]} />
                <Form.Item>
                    <div className="links">
                        <Link to='/login' style={{ color: '#f50' }}>登录</Link>
                        <Link to='/findpass'>找回密码</Link>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
}

export default MyReg